// 定义懒加载插件
import { useIntersectionObserver } from "@vueuse/core";
export const lazyPlugin = {
  install(app) {
    // 懒加载指令逻辑
    // 定义全局指令
    app.directive("img-lazy", {
      mounted(el, binding) {
        // el:指令绑定的那个元素 img
        // binding:binding.value 指令等于后面绑定的表达式的值 图片url
        const { stop } = useIntersectionObserver(
          el, //监听的元素
          ([{ isIntersecting }]) => {
            //   这是一个布尔值，监听是否已经进入视口
            if (isIntersecting) {
              // 进入视口区域
              el.src = binding.value;
              stop();
            }
          }
        );
      },
    });
  },
};
